<template>
	<view class="container">
		<!-- 头部轮播 -->
		<zzh-carousel :banners="banners" class="zzh-index-carousel" :height="200"></zzh-carousel>
		<!--公告通知-->
		<view class="uni-padding-wrap">
			<view class="uni-swiper-msg">
				<view class="uni-swiper-msg-icon">
					<i class="zzhicon icon-tongzhi"></i>
				</view>
				<swiper vertical="false" autoplay="true" circular="true" interval="3000">
					<swiper-item v-for="(item, index) in msg" :key="index">
						<navigator class="clamp">{{item}}</navigator>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 菜单导航-->
		<view class="zzh-menu" v-if="channel.length > 0">
			<block v-for="item in channel" :key="item.id" v-if="item.isShow == 1">
				<div class="item" @click="goPage(item.url + item.categoryId)">
					<image :src="item.iconUrl" background-size="cover"></image>
					<text>{{item.name}}</text>
				</div>
			</block>
		</view>
		<!-- 广告位-->
		<zzh-carousel :banners="ads" :height="89" :indicatorDots="true" :isAutoplay="false"></zzh-carousel>
		<!-- 新品 -->
		<view class="zzh-classify">
			<view class="f-header m-t">
				<image src="/static/temp/h1.png"></image>
				<view class="tit-box">
					<text class="tit">新 品</text>
					<text class="tit2">New Product</text>
				</view>
				<text class="zzhicon icon-jiantou"></text>
			</view>
			<view class="guess-section">
				<view v-for="(item, index) in newGoods" :key="index" class="guess-item" @click="goPage(`/pages/goods/goods?id=${item.id}`)">
					<view class="image-wrapper">
						<image :src="item.listPicUrl" mode="aspectFill"></image>
					</view>
					<text class="title clamp">{{item.name}}</text>
					<text class="price">￥{{item.retailPrice}}</text>
				</view>
			</view>
		</view>
		<!-- 热 门 -->
		<view class="zzh-classify">
			<view class="f-header m-t">
				<image src="/static/temp/h1.png"></image>
				<view class="tit-box">
					<text class="tit">热 门</text>
					<text class="tit2">Hot Product</text>
				</view>
				<text class="zzhicon icon-jiantou"></text>
			</view>
			<view class="guess-section">
				<view v-for="(item, index) in hotGoods" :key="index" class="guess-item" @click="goPage(`/pages/goods/goods?id=${item.id}`)">
					<view class="image-wrapper">
						<image :src="item.listPicUrl" mode="aspectFill"></image>
					</view>
					<text class="title clamp">{{item.name}}</text>
					<text class="price">￥{{item.retailPrice}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import zzhCarousel from '../../components/zzh-carousel.vue';
	export default {
		data() {
			return {
				banners: [],
				ads: [],
				msg: [
					'uni-app行业峰会频频亮相，开发者反响热烈',
					'DCloud完成B2轮融资，uni-app震撼发布',
					'36氪热文榜推荐、CSDN公号推荐 DCloud CEO文章'
				],
				channel: [],
				newGoods: [],
				hotGoods: [],
			}
		},
		components: {
			zzhCarousel,
		},
		created() {
			this.getBannerData();
			this.getChannelData();
			this.getAdData();
			this.getNewGoodsData();
			this.getHotGoodsData();
		},
		methods: {
			//获取轮播广告
			getBannerData() {
				const that = this;
				that.$http.ajax({
					url: that.$http.adornUrl(that.$api.adList),
					data: {
						adPositionId: 1
					},
					showLoad: true
				}).then(function(data) {
					if (data.code == 0) {
						that.banners = data.data;
					}
				})
			},
			//获取导航菜单
			getChannelData() {
				const that = this;
				that.$http.ajax({
					url: that.$http.adornUrl(that.$api.indexChannel),
					showLoad: true
				}).then(function(data) {
					if (data.code == 0) {
						that.channel = data.data;
					}
				})
			},
			//获取轮播广告
			getAdData() {
				const that = this;
				that.$http.ajax({
					url: that.$http.adornUrl(that.$api.adList),
					data: {
						adPositionId: 2
					},
					showLoad: true
				}).then(function(data) {
					if (data.code == 0) {
						that.ads = data.data;
					}
				})
			},
			//获取新增商品
			getNewGoodsData() {
				const that = this;
				that.$http.ajax({
					url: that.$http.adornUrl(that.$api.newGoods)
				}).then(function(data) {
					if (data.code == 0) {
						that.newGoods = data.data.list;
					}
				})
			},
			//获取热销商品
			getHotGoodsData() {
				const that = this;
				that.$http.ajax({
					url: that.$http.adornUrl(that.$api.hotGoods)
				}).then(function(data) {
					if (data.code == 0) {
						that.hotGoods = data.data.list;
					}
				})
			},
			//页面跳转
			goPage(url) {
				console.log(url)
				if (!url) {
					return
				}
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style lang="scss">
	.uni-padding-wrap {
		background-color: #fff;
		width:100%;
	}

	.zzh-menu {
		display: flex;
		height: 180upx;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;

		.item {
			flex: 1;
			display: block;
			padding: 20upx 0;
		}

		image {
			display: block;
			width: 76upx;
			height: 76upx;
			margin: 0 auto;
			margin-bottom: 12upx;
			border-radius: 50%;
			opacity: .7;
			-webkit-box-shadow: 2px 2px 11px rgba(250, 67, 106, 0.3);
			box-shadow: 2px 2px 11px rgba(250, 67, 106, 0.3);
		}

		text {
			display: block;
			font-size: 24upx;
			text-align: center;
			margin: 0 auto;
			line-height: 1;
			color: #333;
		}
	}

	.zzh-classify {
		.f-header {
			display: flex;
			align-items: center;
			height: 140upx;
			padding: 6upx 30upx 8upx;
			background: #fff;

			image {
				flex-shrink: 0;
				width: 80upx;
				height: 80upx;
				margin-right: 20upx;
			}

			.tit-box {
				flex: 1;
				display: flex;
				flex-direction: column;
			}

			.tit {
				font-size: 34upx;
				color: #303133;
				line-height: 1.3;
			}

			.tit2 {
				font-size: 24upx;
				color: #909399;
			}

			.icon-jiantou {
				font-size: 34upx;
				color: #909399;
			}
		}

		.guess-section {
			display: flex;
			flex-wrap: wrap;
			padding: 0 30upx;
			background: #fff;

			.guess-item {
				display: flex;
				flex-direction: column;
				width: 48%;
				padding-bottom: 40upx;

				&:nth-child(2n+1) {
					margin-right: 4%;
				}
			}

			.image-wrapper {
				width: 100%;
				height: 330upx;
				border-radius: 3px;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
					opacity: 1;
				}
			}

			.title {
				font-size: 32upx;
				color: #303133;
				line-height: 80upx;
			}

			.price {
				font-size: 32upx;
				color: #fa436a;
				line-height: 1;
			}
		}
	}
</style>
